 <template>
  <!-- 监测仪信息 -- 编辑/详情 -->
  <view class="monitorInfo">
    <view class="wrapper">
      <view class="wrapper-item content">
        <block v-if="orFlag == 1">
          <u-form
            :model="form"
            ref="form"
            label-width="130"
            :error-type="errorType"
          >
            <u-form-item label="设备组名称" borderBottom :required="true">
              <u--input
                v-model.trim="form.name"
                border="none"
                placeholder="请填写"
                placeholderClass="placeholderClass"
                inputAlign="right"
                :maxlength="30"
              ></u--input>
            </u-form-item>
            <view class="inputPad">
              <u-form-item
                label="设备经纬度"
                borderBottom
                :required="true"
                @click="mapHandle"
              >
                <u--input
                  v-model="lnglat"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请选择"
                  placeholderClass="placeholderClass"
                  inputAlign="right"
                  border="none"
                ></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
            </view>
            <u-form-item label="监控仪MN号" borderBottom :required="true">
              <u--input
                v-model.trim="form.monitorMn"
                border="none"
                placeholder="请填写"
                placeholderClass="placeholderClass"
                inputAlign="right"
                :maxlength="18"
              ></u--input>
            </u-form-item>
          </u-form>
        </block>
        <block v-if="orFlag == 2">
          <u-form
            :model="form"
            ref="form"
            label-width="130"
            :error-type="errorType"
          >
            <u-form-item label="设备组名称" borderBottom>
              <u--input
                v-model="form.name"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
            <u-form-item label="设备经纬度" borderBottom>
              <u--input
                v-model="lnglat"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
            <u-form-item label="监控仪MN号" borderBottom>
              <u--input
                v-model="form.monitorMn"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
          </u-form>
        </block>
      </view>
    </view>

    <view class="btns thispageBtn">
      <block v-if="orFlag == 1">
        <button
          class="cancel-btn lt"
          type="primary"
          @click="navBack('back', 1, 1)"
        >
          取消
        </button>
        <button class="submit-btn" type="primary" @click="submitHandle">
          保存
        </button>
      </block>
      <button
        v-if="orFlag == 2"
        class="submit-btn"
        type="primary"
        @click="editHandle"
        icon="map"
        style="width: 100%"
      >
        编辑
      </button>
    </view>
  </view>
</template>

<script>
import { deviceEdit } from "@/api/deviceManage.js";
import { Toast, navBack, handleClickRouter, emitTime } from "@/utils/util.js";
import mixin from "@/utils/mixin.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      form: {},
      errorType: ["none"],
      orFlag: 1, // 1：编辑  2：详情
      lnglat: "",
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));
    // if (this.options.fanInfoStatus) {
    this.orFlag = 2;
    uni.setNavigationBarTitle({
      title: "详情",
    });

    this.form = this.options;
    this.lnglat = `${this.form.lng}-${this.form.lat}`;
    // }
  },
  methods: {
    handleClickRouter,
    navBack,
    mapHandle() {
      let _this = this;
      uni.chooseLocation({
        success: function (res) {
          let { longitude, latitude } = res;
          _this.form.lng = longitude;
          _this.form.lat = latitude;
          _this.lnglat = `${longitude}-${latitude}`;
        },
        fail: function (err) {
          console.log(err, "错误的");
        },
      });
    },
    editHandle() {
      this.orFlag = 1;
      uni.setNavigationBarTitle({
        title: "编辑",
      });
    },
    submitHandle() {
      let { name, monitorMn, lat, lng } = this.form;

      if (!name) {
        Toast("请输入设备组名称");
        return;
      }

      if (!this.lnglat) {
        Toast("请选择设备经纬度");
        return;
      }

      if (!monitorMn) {
        Toast("请输入监控仪MN号");
        return;
      }

      let numberMn = /^[0-9A-Z]{13,18}$/;
      if (monitorMn && !numberMn.test(monitorMn)) {
        Toast("监控仪MN号请输入13~18位字符");
        return;
      }

      let data = {
        id: this.options.id,
        name,
        lat,
        lng,
        monitorMn,
      };
      deviceEdit(data).then((res) => {
        if (res.code == 200) {
          Toast("保存成功");
          // uni.$emit("deviceInfoData", this.options.id);
          emitTime("deviceInfoData", this.options.id);
          navBack();
          return;
        }
        Toast(res.message);
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.monitorInfo {
  flex: 1;
  background-color: #f3f3f3;
  .monitorInfo-title {
    position: absolute;
    top: 10rpx;
    left: 6%;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: bold;
  }

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    // margin-bottom: 50px;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;
    }

    .content {
      margin: 0 auto;
      height: calc(100vh - 90px);
      overflow-y: auto;
    }

    .seleTime {
      width: 45rpx;
      height: 45rpx;
    }
  }

  .map-form {
    display: flex;
    .map-img {
      color: #00c9ae;
      font-size: 30rpx;
      font-weight: 500;
      image {
        display: inline-block;
        margin-right: 10rpx;
        vertical-align: top;
        width: 30rpx;
        height: 40rpx;
      }
    }
  }

  .thispageBtn {
    position: absolute;
    width: 100vw;
    bottom: 0;
  }
}
</style>
